<template>
    <el-card class="contanier">
        <div slot="header" class="clearfix">
            <span>旅游数据概览</span>
            <div class="circle" style="float: right; padding: 3px 0">
                <div class="item" @click="toggleActive('item1')" :class="{ active: activeItem === 'item1' }">

                </div>
                <div class="item" @click="toggleActive('item2')" :class="{ active: activeItem === 'item2' }">

                </div>
                <div class="item" @click="toggleActive('item3')" :class="{ active: activeItem === 'item3' }">

                </div>
                <div class="item" @click="toggleActive('item4')" :class="{ active: activeItem === 'item4' }">

                </div>
            </div>
        </div>
        <div>
            <el-table :data="traveldata.hotcity" stripe style="width: 100%">
                <el-table-column label="图片" width="180">
                    <template slot-scope="scope">
                        <img :src="scope.img">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</template>

<script>
import { gettraveldata } from "@/api/travel";
import { mapGetters } from "vuex";

export default {
    data() {
        return {
            activeItem: 'item1', // 用来跟踪当前活动的元素  
        };
    },
    mounted() {
        this.initdata()
    },
    computed: {
        ...mapGetters(["traveldata"]),
    },
    methods: {
        toggleActive(itemName) {
            // 切换活动的元素  
            this.activeItem = itemName;
        },
        async initdata() {
            let result = await gettraveldata();
            console.log(result);
            if (result.status == 0) {
                this.$store.dispatch("travel/savedata", result.data);
            }
        },
    },
};  
</script>

</script>

<style scoped>
.active {
    background-color: #7C7877 !important;
}

.contanier {
    margin: 30px;
    width: 40%;
    height: 500px;

    .clearfix {
        .circle {
            display: flex;

            .item {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #eee;
                margin-right: 5px;
            }
        }
    }
}
</style>
